<template>
    <div>
        <!-- 三图模式预览 -->
        <el-row v-if="cntype==1" class="streamViewSan">
            
                <el-col :span="24">
                    <p v-html="content.subject"></p>
                </el-col>
                <el-col :span="8">
                    <el-image :src="content.pic1"></el-image>
                </el-col>
                <el-col :span="8">
                    <el-image :src="content.pic2"></el-image>
                </el-col>
                <el-col :span="8">
                    <el-image :src="content.pic3"></el-image>
                </el-col>
               <el-col :span="24">
                    <p class="become" v-html="content.become"></p>
                </el-col>
            
        </el-row>

        <!-- 大图模式预览 -->
        <el-row v-if="cntype==2"  class="streamViewOne">
          
            <!-- 左右排列，图片在左边 -->
            <div v-if="content.align=='left'">
                 <el-col :span="6">
                    <el-image :src="content.pic1"></el-image>
                </el-col>
                <el-col :span="18" :style="{'padding-left':'20px'}">
                    <p v-html="content.subject"></p>
                    <p class="become" v-html="content.become"></p>
                </el-col>
            </div>
            <!-- 图片在右边 -->
            <div v-else-if="content.align=='right'">
                 <el-col :span="18" :style="{'padding-right':'20px'}">
                    <p v-html="content.subject"></p>
                    <p class="become" v-html="content.become"></p>
                </el-col>

                 <el-col :span="6">
                    <el-image :src="content.pic1"></el-image>
                </el-col>
               
            </div>
              <!-- 图片在上方 -->
            <div v-else-if="content.align=='top'">                
                <el-col :span="24">
                    <el-image :src="content.pic1"></el-image>
                </el-col> 
                 <el-col :span="24">
                    <p v-html="content.subject"></p>
                </el-col>        
                <el-col :span="24">
                    <p class="become" v-html="content.become"></p>
                </el-col>
            </div>
           <!-- 上下排列，图片在上方 -->
            <div v-else >            
                <el-col :span="24">
                    <p v-html="content.subject"></p>
                </el-col>
                <el-col :span="24">
                    <el-image :src="content.pic1"></el-image>
                </el-col>         
                <el-col :span="24">
                    <p class="become" v-html="content.become"></p>
                </el-col>
            </div> 
        </el-row>
    <!-- 视频+标题 -->
         <el-row v-if="cntype==3"  class="streamViewOne">
            
                <el-col :span="24">
                    <p v-html="content.subject"></p>
                </el-col>
                <el-col :span="24">
                 <video ref="videoPlayer" controls :src="content.video"   controlslist="nodownload"                
                 :class="['porel','fullwidth','mal','fla','mat','movie-show-video']"
                 style="width: 100%; height: 100%; object-fit: fill">
                </video>
                </el-col>
                
               <el-col :span="24">
                    <p class="become" v-html="content.become"></p>
                </el-col>
            
        </el-row>
    </div>
</template>

<script>
export default {
  components: {},
  props:{
      "cntype":{ type: undefined, default: undefined},
      'cnrow':{
          type: undefined, default: undefined,
      }
  },
  data(){
      return {
          //content:undefined
      }
  },
  computed:{
    'content': function(){
        if(this.cnrow){
            return this.cnrow;
        }
    }   
  }
} 
</script>
